<template>
  <div id="tree-main"></div>
</template>

<script>
  import * as echarts from 'echarts';
  

  export default{
    mounted(){
      var chartDom = document.getElementById('tree-main');
      var myChart = echarts.init(chartDom);
      var option;
      
      const data = {
        name: '***',
        children: [{name: '***',children: [{name: '***',children: [{ name: '***',children: [{name: '***',children: [{ name: '***',},{ name: '***',}]},{name: '***',children: [{ name: '***' },{ name: '***' }]},]},{ name: '***',children: [{name: '***',children: [{ name: '***',},{ name: '***',}]},{name: '***',children: [{ name: '***' },{ name: '***' }]},]}]},{name: '***',children: [{ name: '***' ,children: [{name: '***',children: [{ name: '***',},{ name: '***',}]},{name: '***',children: [{ name: '***' },{ name: '***' }]},]},{ name: '***' ,children: [{name: '***',children: [{ name: '***',},{ name: '***',}]},{name: '***',children: [{ name: '***' },{ name: '***' }]},]}]},]},{name: '***',children: [{name: '***',children: [{ name: '***',children: [{name: '***',children: [{ name: '***',},{ name: '***',}]},{name: '***',children: [{ name: '***' },{ name: '***' }]},]},{ name: '***',children: [{name: '***',children: [{ name: '***',},{ name: '***',}]},{name: '***',children: [{ name: '***' },{ name: '***' }]},]}]},{name: '***',children: [{ name: '***',children: [{name: '***',children: [{ name: '***',},{ name: '***',}]},{name: '***',children: [{ name: '***' },{ name: '***' }]},]},{ name: '***',children: [{name: '***',children: [{ name: '***',},{ name: '***',}]},{name: '***',children: [{ name: '***' },{ name: '***' }]},]}]},]},]
      };
      option = {
        series: [
          {
            type: 'tree',
            data: [data],
            top: '10%',
            left: '8%',
            bottom: '22%',
            right: '20%',
            symbolSize: 7,
            edgeShape: 'polyline',
            edgeForkPosition: '63%',
            initialTreeDepth: 3,
            orient: 'TB',
            label: {
              backgroundColor: '#fff',
              position: 'left',
              align: 'right'
            },
            leaves: {
              label: {
                position: 'right',
                align: 'left'
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            expandAndCollapse: false,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      };
      
      option && myChart.setOption(option);
      
      
    }
  }
</script>

<style>
</style>
